const HtmlWebpackPlugin = require('html-webpack-plugin')
// const TerserWebpackPlugin = require('terser-webpack-plugin')

/**
 * 1. entry：入口起点
 *      1. String(常用)
 *          单入口，打包形成一个chunk，输出一个bundle文件，默认名称为main
 *      2. Array
 *          多入口，所有文件最终只会形成一个chunk，输出出去只有一个bundle文件，只有在HMR功能中让html热更新生效
 *      3. Object(常用)
 *          多入口，有几个入口文件就形成几个chunk，输出几个bundle文件，此时chunk的名称是'key'
 *            特殊用法(把多个相同的类型打包在同一个chunk)：
 *               {
 *                  react: ['react', 'react-dom', 'react-router'] 
 *               }
 * 
 * 2. output：如下
 * 3. module：如下
 * 4. resolve：如下
 * 5. devServer：如下
 * */

module.exports = {
  // entry: './src/index.js',
  // entry: ['./src/index.js', './src/add.js'],
  entry: {
    index: ['./src/index.js', './src/sub.js'],
    add: './src/add.js'
  },
  output: {
    // 文件名称（指定名称+目录）
    filename: '[name].js',
    // 输出文件目录（将来所有资源输出的公共目录）
    path: `${__dirname}/dist`,
    // 所有资源引入公共路径前缀 ---》 'img/a.png' ---》 '/img/a.png'
    publicPath: './',
    // 非入口chunk的名称（不是entry指定的名称，如import的文件和optimization）
    chunkFilename: 'js/[name].[contenthash:10]_chunk.js',
    // 整个库向外暴露的变量名（默认在整个函数作用域下，外面拿不到）
    library: '[name]',            // (()=>{})()
    // 变量名添加到哪个属性上
    libraryTarget: 'window',      // window.index = (()=>{})()
    // libraryTarget: 'global',   // self.index = (()=>{})()
    // libraryTarget: 'commonjs', // exports.index = (()=>{})()
  },
  module: {
    rules: [
      // loader配置
      {
        test: /\.css$/,
        // 多个loader使用use
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.js$/,
        // 排除node_modules下的js文件
        exclude: /node_modules/,
        // 只检查src下的js文件
        include: `${__dirname}/src`,
        // 优先执行
        enforce: 'pre',
        // 延后执行
        enforce: 'post',
        // 单个loader
        loader: 'eslint-loader',
        // 配置选项
        options: {}
      },
      {
        // 以下配置只会生效一个
        oneOf: []
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin(),
  ],
  mode: 'development',
  // 解析模块规则
  resolve: {
    // 配置解析模块路径别名：优点：简写路径，缺点：路径没有提示
    alias: {
      // vue中的 @引入写法
      '@': `${__dirname}/src`
    },
    // 配置省略文件路径的后缀名
    extensions: ['.js', '.json', '.jsx', '.css'],
    // 告诉 webpack 解析模块是去找哪个目录
    modules: [`${__dirname}/node_modules`]
  },
  devServer: {
    // 运行代码的目录
    contentBase: `${__dirname}/dist`,
    // 监视 contentBase 目录下的所有文件，一旦文件变化就会 reload
    watchContentBase: true,
    // 监视文件的配置项
    watchOptions: {
      // 忽略文件
      ignore: /node_modules/
    },
    // 开启gzip压缩
    compress: true,
    // 端口号
    port: 5000,
    // 域名
    host: '127.0.0.1',
    // 自动打开浏览器
    open: true,
    // 开启HMR
    hot: true,
    // 不要显示启动服务器日志信息
    clientLogLevel: 'none',
    // 除了一些基本启动信息以外，其他内容都不要显示
    // quiet: true,
    // 如果出错了，不要全屏提示
    overlay: false,
    // 服务器代理
    proxy: {
      // 一旦devServer(5000)服务器接收到了/api/xxx的请求，就会把请求转发到另一个服务器(3000)
      '/api': {
        target: 'http://localhost:3000',
        // 发送请求时，请求路径重写：将/api/xxx --> /xxx (去掉/api)
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },
  // 生产环境的配置，记得把上面的mode改为production
  // optimization: {
  //   splitChunks: {
  //     chunks: 'all'
  //   },
  //   // 将当前模块记录的其他模块的hash单独打包为一个文件 runtime
  //   // 解决：修改a文件导致b文件的contenthash变化
  //   runtimeChunk: {
  //     name: entrypoint => `runtime-${entrypoint.name}`
  //   },
  //   minimizer: [
  //     // 配置生产环境的压缩方案：js和css
  //     new TerserWebpackPlugin({
  //       // 开启多进程打包
  //       parallel: true,
  //     })
  //   ]
  // }
}